{% extends "base.html" %}

{% block title %}图书管理系统 - 图书详情{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 返回按钮 -->
    <div class="mb-4">
        <a href="/" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> 返回书籍列表
        </a>
    </div>

    <!-- 图书详情卡片 -->
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-light">
            <h4 class="card-title mb-0">{{ book.title }}</h4>
        </div>
        <div class="card-body">
            <p class="card-text"><strong>作者:</strong> {{ book.author }}</p>
            <p class="card-text"><strong>ISBN:</strong> {{ book.isbn }}</p>
            <p class="card-text"><strong>分类:</strong> {{ book.category or '未分类' }}</p>
            <p class="card-text"><strong>出版日期:</strong> {{ book.publication_date }}</p>
            <p class="card-text"><strong>状态:</strong> <span class="badge bg-{{ book.statusClass }}">{{ book.statusText }}</span></p>
            <p class="card-text"><strong>描述:</strong> {{ book.description }}</p>

            <!-- 借阅和预约记录 -->
            <div class="mb-3">
                <h5>借阅记录</h5>
                {% if book.borrow_records %}
                <ul>
                    {% for record in book.borrow_records %}
                    <li>
                        <strong>用户ID:</strong> {{ record.user_id }}<br>
                        <strong>借阅日期:</strong> {{ record.borrow_date }}<br>
                        <strong>应还日期:</strong> {{ record.due_date or '未设定' }}<br>
                        <strong>归还日期:</strong> {{ record.return_date or '未归还' }}<br>
                        <strong>状态:</strong> {{ record.status }}
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p>没有借阅记录</p>
                {% endif %}
            </div>

            <div>
                <h5>预约记录</h5>
                {% if book.reservations %}
                <ul>
                    {% for reservation in book.reservations %}
                    <li>
                        <strong>用户ID:</strong> {{ reservation.user_id }}<br>
                        <strong>预约日期:</strong> {{ reservation.reservation_date }}<br>
                        <strong>状态:</strong> {{ reservation.status }}
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p>没有预约记录</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 你可以在这里添加一些特定于书籍详情页的JavaScript代码
    // 例如，处理按钮点击事件等
});
</script>

<style>
/* 你可以在这里添加一些特定于书籍详情页的CSS样式 */
</style>
{% endblock %}
